<template>
  <div class="login-container">
    <!-- 登录卡片 -->
    <a-card class="login-card">
      <div class="login-header">
        <div class="logo">
          <div class="logo-icon">
            <i class="fas fa-dragon"></i>
          </div>
          <h1>校园冒险者公会</h1>
        </div>
        <p class="login-subtitle">开启你的校园冒险之旅</p>
      </div>

      <a-form
          :model="userLoginDTO"
          name="basic"
          autocomplete="off"
          class="login-form"
      >
        <a-form-item
            label="学号"
            name="studentId"
            :rules="[{ required: true, message: '请输入你的学号' }]"
        >
          <a-input
              v-model:value="userLoginDTO.studentId"
              size="large"
              placeholder="请输入学号"
              class="uniform-input"
          >
            <template #prefix>
              <i class="fas fa-user"></i>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入你的密码' }]"
        >
          <a-input-password
              v-model:value="userLoginDTO.password"
              size="large"
              placeholder="请输入密码"
              class="uniform-input"
          >
            <template #prefix>
              <i class="fas fa-lock"></i>
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item name="remember">
          <a-checkbox v-model:checked="userLoginDTO.remember">记住我</a-checkbox>
          <a class="forgot-password" href="#">忘记密码?</a>
        </a-form-item>

        <a-form-item>
          <a-button
              type="primary"
              block
              size="large"
              @click="login"
              class="login-btn"
              :loading="loading"
          >
            {{ loading ? '登录中...' : '登录' }}
          </a-button>
        </a-form-item>

        <div class="login-footer">
          <p>还没有账号? <a href="#">立即注册</a></p>
        </div>
      </a-form>
    </a-card>

    <!-- 装饰元素 -->
    <div class="decoration deco-1"></div>
    <div class="decoration deco-2"></div>
    <div class="decoration deco-3"></div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';
import { notification } from "ant-design-vue";
import { useRouter } from 'vue-router'
import store from "@/store";
import axios from 'axios';

export default defineComponent({
  name: "login-view",
  setup() {
    // 管理全局所有的路由 useRoute 管理当前路由
    const router = useRouter();
    const loading = ref(false);

    const userLoginDTO = reactive({
      studentId: '22050541123',
      password: '123456',
      remember: true,
    });

    const login = () => {
      loading.value = true;
      axios.post("/user/user/login", userLoginDTO).then((Result) => {
        console.log(Result)
        let data = Result.data;
        if (data.code) {
          notification.success({description: '登录成功！'});
          // 登录成功，跳到控台主页
          router.push("/home");
          store.commit("setMember", data.content);
        } else {
          notification.error({description: data.msg});
        }
        loading.value = false;
      }).catch(() => {
        loading.value = false;
        notification.error({description: '登录失败，请稍后重试'});
      })
    };

    return{
      userLoginDTO,
      login,
      loading
    }
  },
});
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a192f 0%, #172a45 100%);
  position: relative;
  overflow: hidden;
}

.login-card {
  width: 420px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

.login-card :deep(.ant-card-body) {
  padding: 40px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.logo-icon {
  background: linear-gradient(135deg, #d4af37 0%, #b8972e 100%);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.logo-icon i {
  font-size: 24px;
  color: white;
}

.login-header h1 {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 24px;
  background: linear-gradient(to right, #d4af37, #f9e076);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}

.login-subtitle {
  color: #a1a8b8;
  font-size: 14px;
  margin: 0;
}

.login-form {
  margin-top: 20px;
}

.login-form :deep(.ant-form-item-label > label) {
  color: #f0f4f8;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
}

/* 统一输入框样式 */
.uniform-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #f0f4f8 !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  height: 48px !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
}

.uniform-input:focus,
.uniform-input-focused {
  border: 1px solid #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.uniform-input:hover {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 密码输入框特殊处理 */
.login-form :deep(.ant-input-password.uniform-input) {
  padding: 0 !important;
}

.login-form :deep(.ant-input-password .ant-input) {
  background: transparent !important;
  border: none !important;
  height: 46px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

.login-form :deep(.ant-input-password .ant-input):focus {
  border: none !important;
  box-shadow: none !important;
}

.login-form :deep(.ant-input-password .ant-input-suffix) {
  margin-right: 8px;
}

.login-form :deep(.ant-input-prefix) {
  color: #a1a8b8;
  margin-right: 8px;
}

/* 确保所有表单项目一致 */
.login-form :deep(.ant-form-item) {
  margin-bottom: 20px;
}

.login-form :deep(.ant-form-item-control-input) {
  min-height: auto;
}

.login-form :deep(.ant-checkbox-wrapper) {
  color: #a1a8b8;
}

.login-form :deep(.ant-checkbox-checked .ant-checkbox-inner) {
  background-color: #d4af37;
  border-color: #d4af37;
}

.forgot-password {
  float: right;
  color: #d4af37;
  font-size: 14px;
}

.forgot-password:hover {
  color: #f9e076;
}

.login-btn {
  background: linear-gradient(135deg, #d4af37 0%, #b8972e 100%);
  border: none;
  border-radius: 8px;
  height: 48px;
  font-weight: 600;
  font-size: 16px;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-footer p {
  color: #a1a8b8;
  margin: 0;
  font-size: 14px;
}

.login-footer a {
  color: #d4af37;
}

.login-footer a:hover {
  color: #f9e076;
}

/* 装饰元素 */
.decoration {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
  z-index: 1;
}

.deco-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 10%;
}

.deco-2 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  right: 15%;
}

.deco-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 5%;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    width: 90%;
    margin: 0 auto;
  }

  .login-card :deep(.ant-card-body) {
    padding: 30px 20px;
  }

  .logo {
    flex-direction: column;
    gap: 8px;
  }
}
</style>